<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>API配置测试</title>
    <style>
        body {
            font-family: Arial, sans-serif;
            max-width: 800px;
            margin: 0 auto;
            padding: 20px;
            background: #f5f5f5;
        }
        .card {
            background: white;
            border-radius: 8px;
            padding: 20px;
            margin: 20px 0;
            box-shadow: 0 2px 4px rgba(0,0,0,0.1);
        }
        .status {
            padding: 10px;
            border-radius: 4px;
            margin: 10px 0;
        }
        .success { background: #d4edda; color: #155724; }
        .error { background: #f8d7da; color: #721c24; }
        .warning { background: #fff3cd; color: #856404; }
        .info { background: #d1ecf1; color: #0c5460; }
        button {
            background: #007bff;
            color: white;
            border: none;
            padding: 10px 20px;
            border-radius: 4px;
            cursor: pointer;
            margin: 5px;
        }
        button:hover { background: #0056b3; }
        pre {
            background: #f8f9fa;
            padding: 15px;
            border-radius: 4px;
            overflow-x: auto;
        }
    </style>
</head>
<body>
    <h1>工单管理系统 - API配置测试</h1>
    
    <div class="card">
        <h2>环境变量检查</h2>
        <div id="env-check"></div>
    </div>
    
    <div class="card">
        <h2>API连接测试</h2>
        <button onclick="testApiConnection()">测试API连接</button>
        <button onclick="testWorkOrdersEndpoint()">测试工单端点</button>
        <div id="api-test-result"></div>
    </div>
    
    <div class="card">
        <h2>数据格式测试</h2>
        <button onclick="testDataFormat()">测试数据格式</button>
        <div id="data-test-result"></div>
    </div>
    
    <div class="card">
        <h2>组件状态</h2>
        <div id="component-status"></div>
    </div>

    <script>
        // 检查环境变量
        function checkEnvironment() {
            const envDiv = document.getElementById('env-check');
            const results = [];
            
            // 模拟检查环境变量
            const apiBaseUrl = localStorage.getItem('VITE_API_BASE_URL') || 'https://your-api-domain.com/api';
            const authToken = localStorage.getItem('auth_token');
            
            results.push(`<div class="status info">API基础URL: ${apiBaseUrl}</div>`);
            results.push(`<div class="status ${authToken ? 'success' : 'warning'}">认证Token: ${authToken ? '已设置' : '未设置'}</div>`);
            results.push(`<div class="status info">当前时间: ${new Date().toLocaleString()}</div>`);
            
            envDiv.innerHTML = results.join('');
        }
        
        // 测试API连接
        async function testApiConnection() {
            const resultDiv = document.getElementById('api-test-result');
            resultDiv.innerHTML = '<div class="status info">正在测试连接...</div>';
            
            try {
                const apiBaseUrl = localStorage.getItem('VITE_API_BASE_URL') || 'https://your-api-domain.com/api';
                const response = await fetch(`${apiBaseUrl}/health`, {
                    method: 'GET',
                    mode: 'cors',
                    credentials: 'include'
                });
                
                if (response.ok) {
                    resultDiv.innerHTML = '<div class="status success">✅ API连接成功</div>';
                } else {
                    resultDiv.innerHTML = `<div class="status error">❌ API连接失败: ${response.status} ${response.statusText}</div>`;
                }
            } catch (error) {
                resultDiv.innerHTML = `<div class="status error">❌ 连接错误: ${error.message}</div>`;
            }
        }
        
        // 测试工单端点
        async function testWorkOrdersEndpoint() {
            const resultDiv = document.getElementById('api-test-result');
            resultDiv.innerHTML = '<div class="status info">正在测试工单端点...</div>';
            
            try {
                const apiBaseUrl = localStorage.getItem('VITE_API_BASE_URL') || 'https://your-api-domain.com/api';
                const response = await fetch(`${apiBaseUrl}/work-orders`, {
                    method: 'GET',
                    mode: 'cors',
                    credentials: 'include',
                    headers: {
                        'Content-Type': 'application/json',
                        'Accept': 'application/json'
                    }
                });
                
                if (response.ok) {
                    const data = await response.json();
                    resultDiv.innerHTML = `
                        <div class="status success">✅ 工单端点连接成功</div>
                        <pre>${JSON.stringify(data, null, 2)}</pre>
                    `;
                } else {
                    resultDiv.innerHTML = `<div class="status error">❌ 工单端点失败: ${response.status} ${response.statusText}</div>`;
                }
            } catch (error) {
                resultDiv.innerHTML = `<div class="status error">❌ 工单端点错误: ${error.message}</div>`;
            }
        }
        
        // 测试数据格式
        function testDataFormat() {
            const resultDiv = document.getElementById('data-test-result');
            
            const mockData = [
                {
                    "orderno": "WO10062405211",
                    "productname": "星网卫星（阶段9）",
                    "masterplan": "NTMO22405300002 灵犀04星AIT",
                    "model": "XW先导星",
                    "works": [
                        {
                            "workno": "WO10062405211-M09",
                            "workname": "星上发射相控阵电源拆除"
                        }
                    ]
                }
            ];
            
            resultDiv.innerHTML = `
                <div class="status success">✅ 数据格式正确</div>
                <h4>示例数据结构:</h4>
                <pre>${JSON.stringify(mockData, null, 2)}</pre>
            `;
        }
        
        // 更新组件状态
        function updateComponentStatus() {
            const statusDiv = document.getElementById('component-status');
            statusDiv.innerHTML = `
                <div class="status info">WorkOrderList.vue: 已更新为跨域API</div>
                <div class="status info">KitAnalysis.vue: 已更新为跨域API</div>
                <div class="status warning">提示: 两个组件现在使用相同的API端点</div>
            `;
        }
        
        // 页面加载时执行检查
        window.onload = function() {
            checkEnvironment();
            updateComponentStatus();
        };
    </script>
</body>
</html>
